<template>
    <div class="register">
    <div class="register-top">
        <div class="register-top-a">用户注册</div>
    </div>
    <div class="register-message">
             <div class="message-one">
           手机号码： <input type="text" placeholder="手机号码" @blur="checkUserId" v-model="user.userId">
             </div>
             <div class="message-two">
            密码：&nbsp;&nbsp; <input type="password" placeholder="密码" v-model="user.password">
             </div>
             <div class="message-three">
            确认密码：<input type="password" placeholder="确认密码" v-model="confirmPassword">
             
             </div>
             <div class="message-six">
            <input type="password" placeholder="验证码" v-model="Smscode">
            <div class="smsCode">
            <a @click="SendSmsCode">获取验证码</a>
             </div>
             </div>
             <div class="message-four">
            用户名称 <input type="text" placeholder="用户名称" v-model="user.userName">
             </div>
             <div class="message-five">
             
                     <input type="radio" id="male" name="gender" value="1" v-model="user.userSex">男
                     <input type="radio" id="female" name="gender" value="0" v-model="user.userSex">女
             </div>
    </div>
    <div class="register-footer" @click="register">
        注册
    </div>
    </div>
    <Footer></Footer>
</template>
<style>


.register-top{
    width: 100%;
    height: 100px;
    background-color: #0097ff;

}
.register-top-a{
    color: #ffffff;
    font-size: 50px;
    text-align: center;
}
.register-message{
    color: #666666;
    font-size: 30px;
    text-align: left;
   
}
.register-message input{
    font-size: 30px;
    border: none;
    outline: none;
    height: 50px;
    width: 500px;
    margin-bottom: 10px;
}
.register-message input::placeholder{
    font-size: 30px;
}
.message-five {
    display: flex;
    width: 200px;
}
.register-footer{
    width: 600px;
    height: 100px;
    color: #ffffff;
    background-color: #38ca73;
    font-size: 50px;
    transform: translate(80%, 50%);
}
.message-six{
    display: flex;
}
.smsCode{
    color: #0097ff;
}

</style>
<script>


export default{
    name:'Register',
    data(){
        return{
            user:{
                userId:'',
                password:'',
                userName:'',
                userSex:1
            },
            confirmPassword:'',
            Smscode:'',
            SmscodeReturn:''
        }
    },
    methods:{
     checkUserId(){
        this.$axios.post('getUserById',this.$qs.stringify({
            userId:this.user.userId,
        })).then(response =>{
            if(response.data != ''){
                this.user.userId = '';
                alert('此号码已存在!')
            }
        }).catch(error =>{
            console.error(error);
        });
        
     },
     register(){
        if(this.user.userId == ''){
            alert('手机号不能为空');
            return;
        }
        if(this.user.password==''){
            alert('密码不能为空');
            return;
        }
        if(this.user.password != this.confirmPassword){
            alert('两次输入的密码不一致');
            return;
        }
        if(this.Smscode != this.SmscodeReturn){
            alert('验证码不正确');
            return;
        }
        if(this.user.userName == ''){
            alert('用户名不能为空！');
            return;
        }
        this.$axios.post('saveUser',this.$qs.stringify(
            this.user
        )).then(response =>{
            if(response.data>0){
                alert('注册成功');
                this.$router.push("/login");
            }else{
                alert('注册失败');
                this.$router.push("/register");
            }
        }).catch(error =>{
            console.error(error);
        });
     },
     SendSmsCode(){
        this.$axios.post('SmsController/smsCode',this.$qs.stringify({
            telephone:this.user.userId
        })).then(response =>{
            this.SmscodeReturn = response.data;
            alert(this.SmscodeReturn)
        }).catch(error =>{
            console.error(error);
            
        })
     }
    },
    
}
</script>